<template>
  <div>
    <el-card>
      <div class="box">
        <img :src="userStore.avatar" alt="" class="avatar">
        <div class="message">
          <h3 class="title">{{ getTime() + '好，' + userStore.username }}</h3>
          <h5 class="name">后台管理平台</h5>
        </div>
      </div>
    </el-card>
    <div class="bottom">
      <svg-icon name="welcome" width="28rem" height="28rem"></svg-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import useUserStore from '@/store/modules/user'
import { getTime } from '@/utils/time'

//获取user配置相关的仓库
let userStore = useUserStore()


onMounted(() => {
  userStore.userInfo()
})
</script>

<style scoped lang="scss">
.box {
  display: flex;

  .avatar {
    width: 6.25rem;
    height: 6.25rem;
    border-radius: 50%;
  }

  .message {
    margin-left: 1.25rem;

    .title {
      font-size: 2rem;
      font-weight: 900;
      margin-bottom: 3rem;
    }

    .name {
      font-style: italic;
    }
  }
}

.bottom {
  display: flex;
  justify-content: center;
  margin-top: .625rem;
}
</style>
